// 加载HTML模板
async function loadTemplate() {
    const response = await fetch('components/image-modal.html');
    return await response.text();
}

export async function initImageModal() {
    const template = await loadTemplate();
    document.getElementById('imageModalContainer').innerHTML = template;
    
    // 获取元素
    const modal = document.getElementById('imageModal');
    const closeBtn = modal.querySelector('.close-btn');
    const dropZone = document.getElementById('dropZone');
    const imageInput = document.getElementById('imageInput');
    const imagePreview = document.getElementById('imagePreview');
    const base64Output = document.getElementById('base64Output');
    const copyBase64Btn = document.getElementById('copyBase64');
    const selectImageBtn = document.getElementById('selectImage');
    const previewContainer = document.getElementById('previewContainer');
    
    // 关闭按钮事件
    closeBtn.addEventListener('click', () => {
        modal.style.display = 'none';
        resetUpload();
    });
    
    // 点击模态框外部关闭
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.style.display = 'none';
            resetUpload();
        }
    });

    // 处理图片文件
    function handleImage(file) {
        if (!file.type.startsWith('image/')) {
            showToast('请选择图片文件', 'error');
            return;
        }

        const reader = new FileReader();
        reader.onload = (e) => {
            imagePreview.src = e.target.result;
            base64Output.value = e.target.result;
            previewContainer.style.display = 'block';
            copyBase64Btn.disabled = false;
            showToast('图片处理成功');
        };
        
        reader.onerror = () => {
            showToast('图片读取失败', 'error');
        };
        
        reader.readAsDataURL(file);
    }

    // 重置上传状态
    function resetUpload() {
        previewContainer.style.display = 'none';
        copyBase64Btn.disabled = true;
        imageInput.value = '';
        imagePreview.src = '';
        base64Output.value = '';
    }

    // 选择图片按钮点击事件
    selectImageBtn.addEventListener('click', () => {
        imageInput.click();
    });

    // 文件选择变更事件
    imageInput.addEventListener('change', (e) => {
        if (e.target.files && e.target.files[0]) {
            handleImage(e.target.files[0]);
        }
    });

    // 拖放区域点击事件
    dropZone.addEventListener('click', () => {
        imageInput.click();
    });

    // 拖放相关事件
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropZone.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files && files[0]) {
            handleImage(files[0]);
        }
    });

    // 复制Base64按钮点击事件
    copyBase64Btn.addEventListener('click', () => {
        const text = base64Output.value;
        navigator.clipboard.writeText(text).then(() => {
            showToast('已复制到剪贴板');
        }).catch(err => {
            console.error('复制失败:', err);
            showToast('复制失败', 'error');
        });
    });
}

// 显示提示信息
function showToast(message, type = 'success') {
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.classList.add('show');
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => document.body.removeChild(toast), 300);
        }, 2000);
    }, 100);
} 